<template>
	<view class="view-box">
		<u-sticky bgColor="#161819">
			<u-tabs :current="cur" :lineWidth="75" :list="tabList" @click="tabChange" activeStyle="color: #0273df">
			</u-tabs>
		</u-sticky>
		<view class="view">
			<view class="box u-flex" v-if="cur === 0">
				<view class="son u-flex-fill u-flex">
					<view class="son-left u-flex-1">
						<view class="item u-flex u-flex-xy-center">1#</view>
						<view class="item u-flex u-flex-xy-center">3#</view>
						<view class="item u-flex u-flex-xy-center sm" :class="[getType('1#空调')]" @click="toDetailPrev('1#空调')">1#空调</view>
						<view class="item u-flex u-flex-xy-center">5#</view>
						<view class="item u-flex u-flex-xy-center">7#</view>
						<view class="item u-flex u-flex-xy-center">9#</view>
						<view class="item u-flex u-flex-xy-center sm" :class="[getType('3#空调')]" @click="toDetailPrev('3#空调')">3#空调</view>
						<view class="item u-flex u-flex-xy-center" :class="[getType('UPS')]" @click="toDetailPrev('UPS')">UPS</view>
						<view class="item u-flex u-flex-xy-center" :class="[getType('配电箱')]" @click="toDetailPrev('配电箱')">配电箱</view>
					</view>
					<view class="son-mid u-flex u-flex-column">
						<view class="squares top u-flex">
							<view class="square"></view>
							<view class="square flip">
							</view>
						</view>
						<view class="u-flex-fill">
							<view class="u-flex u-flex-xy-center" style="margin-top: 10px;">
									<view class="smoke-box u-flex u-flex-xy-center">
										1#烟感
									</view>
							</view>
							<view class="u-flex u-flex-xy-center" style="margin-top: 20px;">
								<view class="th-box">
									<view class="th-box-item">
										<text class="th-item-val">{{th1.t_val}}</text><text class="th-item-unit">℃</text>
									</view>
									<view class="th-box-item">
										<text class="th-item-val">{{th1.h_val}}</text><text class="th-item-unit">%</text>
									</view>
								</view>
							</view>
							
							<view class="u-flex u-flex-xy-center" style="margin-top: 100px;">
									<view class="smoke-box u-flex u-flex-xy-center">
										漏水
									</view>
							</view>
						
							<view class="u-flex u-flex-xy-center" style="margin-top: 100px;">
									<view class="smoke-box u-flex u-flex-xy-center">
										2#烟感
									</view>
							</view>
							<view class="u-flex u-flex-xy-center" style="margin-top: 20px;">
								<view class="th-box">
									<view class="th-box-item">
										<text class="th-item-val">{{th2.t_val}}</text><text class="th-item-unit">℃</text>
									</view>
									<view class="th-box-item">
										<text class="th-item-val">{{th2.h_val}}</text><text class="th-item-unit">%</text>
									</view>
								</view>
							</view>
						</view>
						<view class="squares btm flip u-flex">
							<view class="square"></view>
							<view class="square flip"></view>
						</view>
					</view>
					<view class="son-right u-flex-1">
						<view class="item u-flex u-flex-xy-center">2#</view>
						<view class="item u-flex u-flex-xy-center">4#</view>
						<view class="item u-flex u-flex-xy-center sm" :class="[getType('2#空调')]" @click="toDetailPrev('2#空调')">2#空调</view>
						<view class="item u-flex u-flex-xy-center">6#</view>
						<view class="item u-flex u-flex-xy-center">8#</view>
						<view class="item u-flex u-flex-xy-center">10#</view>
						<view class="item u-flex u-flex-xy-center sm" :class="[getType('4#空调')]" @click="toDetailPrev('4#空调')">4#空调</view>
						<view class="item u-flex u-flex-xy-center">11#</view>
						<view class="item u-flex u-flex-xy-center">12#</view>
					</view>
				</view>
			</view>

			<view class="box2" v-if="cur === 1">
				<view class="card item u-flex u-flex-xy-center" v-for="(row, ind) in list" :key="row.id"
					@click="toDetail(row)">
					<view class="logo">
						<image :src="`../../../static/icon/${row.logo || 'power'}.png`" style="width: 48px;" mode="aspectFit"></image>
					</view>
					<view class="info u-flex-fill">
						<view class="title-box u-flex u-flex-xy-center">
							<view class="title u-flex-fill u-line-1 w0">
								{{ row.name }}
							</view>
							<view class="more u-flex u-flex-xy-center">
								<view class="">
									详情
								</view>
								<view class="">
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
						<view class="status u-flex">
							<text class="label">状态:</text>
							<view :class="[getDeviceStatusClass(row.status_type)]">
								{{row.status_text || '正常'}}
							</view>
						<!-- 	<u-tag  :text="row.status_text || '正常'" :type="row.status_type ||'success'" size="mini"
								plain> </u-tag> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				name: '',
				cur: 0,
				tabList: [{
					name: '平面图预览'
				}, {
					name: '设备清单'
				}],
				list: [{
						id: 1,
						type: '空调',
						name: '1#空调',
						status: '正常',
					},
					{
						id: 2,
						type: '空调',
						name: '2#空调',
						status: '正常',
					},

					{
						id: 3,
						type: '空调',
						name: '3#空调',
						status: '正常',
					},
					{
						id: 4,
						type: '空调',
						name: '4#空调',
						status: '正常',
					},
					{
						id: 5,
						type: 'ups',
						name: 'UPS',
						status: '正常',
					},
					// {
					// 	id: 4,
					// 	type: '温湿度',
					// 	name: '温湿度',
					// 	status: '正常',
					// },
					{
						id: 6,
						type: '配电',
						name: '配电箱',
						status: '正常',
					},
				],
				th1:{
					t_val:21.6,
					h_val:72.4
				},
				th2:{
					t_val:22.4,
					h_val:71.8
				}
			}
		},
		onLoad(opt) {
			let name = opt.name || 'MDC'
			this.name = name
			uni.setNavigationBarTitle({
				title: name + '模块'
			})
			this.getListData()
			// let sys = uni.$u.sys()
			// this.H = sys.windowHeight - 120
			// console.log(sys)
			setTimeout(()=>{
				this.updateTh()
			},1000)
		},
		onUnload(){
				if(this.updateInterval){
					clearTimeout(this.updateInterval)
				}
		},
		methods: {
			getListData() {
				this.list = this.list.map(v => {
					if(this.name == 'M101-MDC' && v.name == 'UPS') {
						v.status = '严重'
					}
					if(this.name == 'M101-MDC' && v.name == '2#空调') {
						v.status = '紧急'
					}
					if(this.name == 'M105-MDC' && v.name == '2#温湿度') {
						v.status = '严重'
					}
					let t = '',
						t2 = '',
						t3 = ''
					switch (v.type) {
						case '空调':
							t = 'air';
							break;
						case '配电':
							t = 'power';
							break;
						case 'ups':
							t = 'ups';
							break;
						case '温湿度':
							t = 'tem_hum';
							break;
						default:
							t = 'power';
					}
					switch (v.status) {
						case '正常':
							t2 = '正常';
							t3 = 'success';
							break;
						case '严重':
							t2 = '严重';
							t3 = 'warning';
							break;
						case '紧急':
							t2 = '紧急';
							t3 = 'error';
							break;
						default:
							t2 = '正常';
							t3 = 'success'
					}
					v.logo = t
					v.status_text = t2
					v.status_type = t3
					return v
				})
			},
			tabChange(e) {
				this.cur = e.index
			},
			toDetail(row) {
				let u = `?name=${row.name}&mdc=${this.name}&status=${row.status}`
				switch(row.type) {
					case '配电': u = './pd_detail'+u;break;
					case 'ups': u = './ups_detail'+u;break;
					case '温湿度': u = './wsd_detail'+u;break;
					case '空调': u = './detail'+u;break;
					default: u = './detail'+u;
				}
				uni.navigateTo({
					url: u
				})
			},
			toDetailPrev(name = '') {
				let row = this.list.find(v => v.name == name)
				if(row) {
					this.toDetail(row)
				}
			},
			getType(name = '') {
				let row = this.list.find(v => v.name == name)
				switch (row.status) {
					case '正常':
						return 'primary';
					case '严重':
						return 'warning';
					case '紧急':
						return 'error';
					default:
						return 'primary'
				}
			},
			getDeviceStatusClass(status){
				switch (status) {
					case 'success':
						return 'device-status-ok';
					case 'warning':
						return 'device-status-warning';
					case 'error':
						return 'device-status-error';
					default:
						return 'device-status-ok'
				}
			},
			// 更新温湿度
			updateTh(){
				if(this.updateInterval){
					clearTimeout(this.updateInterval)
				}
				var t1_val =(20+ (Math.random()*25)/100).toFixed(1)
				var h1_val =(70+ (Math.random()*50)/100).toFixed(1)
				
				var t2_val =(20+ (Math.random()*22)/100).toFixed(1)
				var h2_val =(70+ (Math.random()*45)/100).toFixed(1)
				
				this.th1.t_val=t1_val
				this.th1.h_val=h1_val
				this.th2.t_val=t2_val
				this.th2.h_val=h2_val
					
				
				this.updateInterval= setTimeout(()=>{
					this.updateTh()
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	$c: #54575b;


	page {
		// background-color: $u-bg-color;
		
	}
	
	.u-tag--mini{
			height: 16px !important;
			line-height: 16px !important;
			font-size: 14px !important;
	}

	.view {
		.box {
			background-color: $u-bg-color;
			border: 12rpx solid $c;
			border-radius: 12rpx;
			padding: 20rpx;
			
			.th-box {
				width: 57px;
				padding: 2px;
				text-align: center;
				border-radius: 5px;
				border: 3px solid #12b7a4;
				
				.th-box-item{
					line-height: 16px;
					.th-item-val{
						font-size: 16px;
					}
					.th-item-unit{
						margin-left: 4px;
						font-size: 14px;
						color: rgba(255,255,255,0.45);;
					}
				}
			}
			
			.smoke-box{
				width: 54px;
				padding:2px;
				border-radius: 5px;
				border: 3px solid #12b7a4;
				
			}

			// margin-top: 20rpx;
			.son {
				.son-left {}

				.son-mid {
					width: 180rpx;
					margin: 0 20rpx;
					flex-direction: column;

					.squares {
						&.top {
							margin-top: -30rpx;
						}

						&.btm {
							margin-bottom: -30rpx;
						}

						&.flip {

							transform: rotateX(180deg);
						}

						.square {
							width: 90rpx;
							height: 90rpx;
							border-bottom-right-radius: 100%;
							border: 8rpx solid $c;

							&.flip {
								transform: rotateY(180deg);
							}
						}
					}
				}

				.son-right {}

				.item {
					// width: 100%;
					border: 8rpx solid $c;
					border-radius: 12rpx;
					height: 100rpx;
					margin-top: 20rpx;

					&:nth-child(1) {
						margin-top: 0;
					}

					&.sm {
						height: 60rpx;
					}

					&.primary {
						border-color: #12b7a4;
						color: #12b7a4;
					}

					&.warning {
						border-color: $u-warning;
					}

					&.error {
						border-color: $u-error;
					}
				}
			}
		}

		.box2 {
			.item {
				&:nth-child(1) {
					margin-top: 0;
				}

				// height: 150rpx;

				.logo {
					margin-right: 12px;
					image {
						width: 100%;
						height: 48px;
						width: 48px;
					}
				}

				.info {
					.title-box {
						.title {
							color: rgba(255,255,255,0.85);
							font-size: 16px;
							margin-right: 10rpx;
							line-height: 18px;
						}

						.more {
							color: rgba(255,255,255,0.45);
							font-size: 14px;
							line-height: 18px;
						}
					}
					.status {
						margin-top: 8px;
						font-size: 14px;
						line-height: 16px;
						color: rgba(255,255,255,0.45);
						.label {
							margin-right: 8px;
						}
						.device-status-ok{
							border: 1px solid #07C160;
							border-radius: 2px;
							padding: 2px 4px;
							font-size: 12px;
							line-height: 12px;
							color:#07C160 ;
						}
						.device-status-warning{
							border: 1px solid #FA9E3B;
							border-radius: 2px;
							padding: 2px 4px;
							font-size: 12px;
							line-height: 12px;
							color:#FA9E3B;
						}
						.device-status-error{
							border: 1px solid #FA5151;
							border-radius: 2px;
							padding: 2px 4px;
							font-size: 12px;
							line-height: 12px;
							color:#FA5151 ;
						}
					}
				}
			}

		}
	}
</style>
